<template>
  <div>
    <van-sticky>
      <van-tabs
        v-model:active="active"
        color="#59b5fc"
        sticky
        @click-tab="onClickTab"
      >
        <van-tab title="消息"></van-tab>
        <van-tab title="关注"></van-tab>
        <van-tab title="粉丝"></van-tab>
      </van-tabs>
    </van-sticky>
    <div class="message" v-if="active == 0">

<!--       
      <div class="message-item" @click="$router.push('messageList?type=thumb')">
        <div class="icon">
          <van-icon name="good-job" />
        </div>
        <div class="right">
          <div class="title"><strong>点赞</strong></div>
          <div class="content">{{ thumbMessage }}</div>
        </div>
        <div class="rr">
          <van-icon name="arrow" />
        </div>
      </div>
      <div
        class="message-item"
        @click="$router.push('messageList?type=comment')"
      >
        <div class="icon">
          <van-icon name="comment-circle" />
        </div>
        <div class="right">
          <div class="title"><strong>评论</strong></div>
          <div class="content">{{ commitMessage }}</div>
        </div>
        <div class="rr">
          <van-icon name="arrow" />
        </div>
      </div>
 -->

      <div
        class="message-item"
        @click="$router.push('messageList?type=message')"
      >
        <div class="icon">
          <van-icon name="chat" />
        </div>
        <div class="right">
          <div class="title"><strong>私信</strong></div>
          <div class="content">{{ msgMessage }}</div>
        </div>
        <div class="rr">
          <van-icon name="arrow" />
        </div>
      </div>
      <!--
      <div class="message-item" @click="$router.push('messageList?type=fans')">
        <div class="icon">
          <van-icon name="smile" />
        </div>
        <div class="right">
          <div class="title"><strong>粉丝</strong></div>
          <div class="content">{{ thumbMessage }}</div>
        </div>
        <div class="rr">
          <van-icon name="arrow" />
        </div>
      </div>
      <div
        class="message-item"
        @click="$router.push('messageList?type=friends')"
      >
        <div class="icon">
          <van-icon name="friends" />
        </div>
        <div class="right">
          <div class="title"><strong>新的朋友</strong></div>
          <div class="content">{{ thumbMessage }}</div>
        </div>
        <div class="rr">
          <van-icon name="arrow" />
        </div>
      </div>
      <div
        class="message-item"
        @click="$router.push('messageList?type=system')"
      >
        <div class="icon">
          <van-icon name="bell" />
        </div>
        <div class="right">
          <div class="title"><strong>系统通知</strong></div>
          <div class="content">{{ thumbMessage }}</div>
        </div>
        <div class="rr">
          <van-icon name="arrow" />
        </div>
      </div>
  -->
    </div>
    <div class="follows" v-if="active == 1">
      <div
        v-for="item in followsData"
        :key="item.id"
        @click="handelUserItemClick(item)"
      >
        <div
          class="list_content d-flex justify-content-between align-items-center"
        >
          <div class="left">
            <van-image
              radius="14"
              width="130"
              height="120"
              fit="cover"
              :src="returImg(item.avatar)"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <van-image></van-image>
              </template>
            </van-image>
          </div>
          <div
            class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4"
          >
            <div>昵称:{{ item.nickname }}</div>
            <div class="itemContent">{{ item.intro }}</div>
            <div class="price">贴子数:{{ item.posts.length }}</div>
            <div>性别:{{ item.gender }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="fans" v-if="active == 2">
      <div
        v-for="item in fansData"
        :key="item.id"
        @click="handelUserItemClick(item)"
      >
        <div
          class="list_content d-flex justify-content-between align-items-center"
        >
          <div class="left">
            <van-image
              radius="14"
              width="130"
              height="120"
              fit="cover"
              :src="returImg(item.avatar)"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <van-image></van-image>
              </template>
            </van-image>
          </div>
          <div
            class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4"
          >
            <div>昵称:{{ item.nickname }}</div>
            <div class="itemContent">{{ item.intro }}</div>
            <div class="price">贴子数:{{ item.posts.length }}</div>
            <div>性别:{{ item.gender }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findUserById } from '@/api/service'
import { useLocalStorage } from '@/utils/useLocalStorage'
import { baseUrl } from '@/api/request'
import { io } from 'socket.io-client'
import { useMessageStore } from '@/store/message'
const MessageStore = useMessageStore()
const route = useRoute()
const router = useRouter()
const active = ref(0)
const onClickTab = ({ title }) => console.log(title, active.value)
let thumbMessage = ref('暂无消息')
let commitMessage = ref('暂无消息')
let msgMessage = ref('暂无消息')
let msgMessageCount = MessageStore.msg.length
const userId = localStorage.getItem('userInfo')
  ? JSON.parse(useLocalStorage.get('userInfo')).id
  : ''
const followsList = ref([])
const fansList = ref([])
const followsData = ref([])
const fansData = ref([])

console.log(userId)
msgMessage.value = MessageStore.msg.length>0?`有${msgMessageCount}条新消息`:'暂无消息'
findUserById(userId).then((res: any) => {
  console.log(res)
  followsList.value = [...res.data[0].follows]
  fansList.value = [...res.data[0].fans]
  console.log(followsList.value)

  for (let i = 0; i < followsList.value.length; i++) {
    const element = followsList.value[i]
    console.log(element, 'element')
    findUserById(element).then((res: any) => {
      console.log('findfollows', res)
      followsData.value.push(res.data[0])
      console.log('followsData', followsData.value)
    })
  }

  for (let i = 0; i < fansList.value.length; i++) {
    const element = fansList.value[i]
    console.log(element, 'element')
    findUserById(element).then((res: any) => {
      console.log('findfollows', res)
      fansData.value.push(res.data[0])
      console.log('followsData', fansData.value)
    })
  }
})
const handelUserItemClick = (e) => {
  console.log(e)
  router.push(`userdetail?id=${e.id}`)
}

const returImg = (e) => {
  return `${baseUrl}/images/${e}`
}

const socket = io(baseUrl, {
  query: {
    userId: userId,
  },
})
socket.on('connect', () => {
  console.log(socket.id) //
  console.log(' 连上了')
})
socket.on('connection', (data) => {
  console.log(data)
})

socket.on('getMessage', (data) => {
  console.log('getMessage', data)
  if (data.toUserId == userId) {
    MessageStore.pushUserMessage(data)
    msgMessageCount++
    msgMessage.value = `有${msgMessageCount}条新消息`
  }
})
</script>

<style scoped lang="scss">
.index-bar {
  :deep(.van-index-bar__index) {
    line-height: var(--van-line-height-lg);
  }
}
.message {
  display: flex;
  flex-direction: column;
  .message-item {
    height: 20vw;
    // border: 1px solid #aaa;
    display: flex;
    align-items: center;
    .icon {
      width: 15vw;
      // border: 1px solid #aaa;
      height: 15vw;
      font-size: 10vw;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-left: 2vw;
      margin-right: 2vw;
      background-color: rgb(245, 245, 245);
    }
    .right {
      flex: 1;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      margin-left: 2vw;
      flex-direction: column;
      .title {
        height: 8vw;
        padding-bottom: 1vw;
        flex: 1;
        display: flex;
        align-items: end;
        font-size: 18px;
        font-weight: 600;
        font-family: Microsoft YaHei;
      }
      .content {
        height: 8vw;
        padding-top: 1vw;
        flex: 1;
        display: flex;
        align-items: start;
        font-size: 14px;
        font-weight: 400;
        color: #666;
      }
    }
    .rr {
      width: 6vw;

      height: 6vw;
      font-size: 6vw;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-left: 2vw;
      margin-right: 2vw;
    }
  }
}

.list_content {
  height: 32vw;
  /* background-color: #f5f5f5; */
  border-radius: 10px;
  margin: 5px;
  padding: 0 10px;
  .left {
  }
  .right {
    overflow: hidden;
    > div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      color: red;
    }
  }
}
</style>
